<template>
  <!-- 广告管理 -->
  <el-container>
    <el-header>
      <!-- //引入pagetitle组件 -->
      <Pagetitle :title="title1" :SecTitle="title2"></Pagetitle>
          </el-header
    >
        <el-main style="padding: 20px 0px"
      > 
      <!--         //这里是页面内容区域
		//这个区域的背景色是白色， -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="类型">
          <el-input
            clearable
            v-model="formInline.w_type_name"
            placeholder="请输入类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            clearable
            v-model="formInline.w_state"
            placeholder="请选择"
          >
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onScreen()">筛选</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="
              onAdd;
              dialogFormVisible_2 = true;
            "
            >添加类型</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'created', order: 'descending' }"
      >
        <!-- :default-sort="{ prop: 'created', order: 'descending' }" 即默认排序 -->
        <el-table-column prop="typeName" label="类型名称" width="180">
        </el-table-column>
        <el-table-column prop="newDate" label="创建日期" sortable width="180">
          <template slot-scope="scope">
            <span>
              {{ time1(scope.row.newDate) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="序号" sortable width="180">
        </el-table-column>
        <el-table-column prop="status" label="状态" sortable width="180">
          <template slot-scope="scope">
            <span>
              {{ scope.row.status == 1 ? "启用" : "禁用" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="
                handleSee(scope.$index, scope.row);
                dialogTableVisible = true;
              "
              >查看</el-button
            >
            <el-button
              size="mini"
              type="info"
              @click="
                handleEdit(scope.$index, scope.row);
                dialogFormVisible_1 = true;
              "
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
          </el-main
    >
    <el-main style="padding: 20px 0px">
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>
          </el-main
    >
    <el-dialog width="30%" title="查看" :visible.sync="dialogTableVisible">
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
          <template slot="label"> 类型名称 </template>
          {{ InfoData.typeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 序号 </template>
          {{ InfoData.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 状态 </template>
          {{ InfoData.status == 1 ? "启用" : "禁用" }}
        </el-descriptions-item>
      </el-descriptions>
      <el-button class="eidt" @click="dialogTableVisible = false"
        >返回</el-button
      >
    </el-dialog>
    <el-dialog width="30%" title="编辑" :visible.sync="dialogFormVisible_1">
      <el-form :model="form">
        <el-form-item label="类型名称" :label-position="labelPosition">
          <el-input
            placeholder="请输入类型名称"
            v-model="form.e_type_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-position="labelPosition"
          ><br />
          <el-radio v-model="s_state" label="1">启用</el-radio>
          <el-radio v-model="s_state" label="0">禁用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            dialogFormVisible_1 = false;
            editCon();
          "
          >确 定</el-button
        >
        <el-button
          @click="
            dialogFormVisible_1 = false;
            noCon();
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <el-dialog width="30%" title="添加类型" :visible.sync="dialogFormVisible_2">
      <el-form :model="form">
        <el-form-item label="类型名称" :label-position="labelPosition">
          <el-input
            placeholder="请输入类型"
            v-model="form.a_type_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-position="labelPosition"
          ><br />
          <el-radio v-model="s_state" label="1">启用</el-radio>
          <el-radio v-model="s_state" label="0">禁用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addCon()">确 定</el-button>
        <el-button
          @click="
            dialogFormVisible_2 = false;
            noCon();
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Pagetitle from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";
export default {
  components: {
    Pagetitle,
    Paging,
  },
  data() {
    return {
      title1: "广告管理",
      title2: "广告类型",
      total: 5, //总共多少条，这个需要通过接口获取后赋值
      pagesize: 4, //有4，6，8，10可选,
      currentPage: 1, //当前页数
      formInline: {
        w_type_name: "",
        w_state: "",
      },
      tableData: [],
      InfoData: {
        name: "",
        id: "",
        status: "",
      },
      form: {
        e_type_name: "",
        a_type_name: "",
      },
      labelPosition: "top",
      s_state: "",
      id: "",
      dialogTableVisible: false,
      dialogFormVisible_1: false,
      dialogFormVisible_2: false,
      dialogFormVisible_3: false,
    };
  },
  //调用
  created() {
    this.getCon(this.currentPage, this.pagesize);
  },
  methods: {
    //获取所有数据
    async getCon(page, pagesize) {
      const { data: res } = await this.axios({
        url: "/advertisingType/list",
        method: "post",
        data: {
          typeName: this.formInline.w_type_name,
          status: this.formInline.w_state,
          page: page,
          pageSize: pagesize,
        },
       
      });
      if (res.code == 0) {
        // total代表数据总条数
        this.total = res.count;
        console.log(res.data);
        this.tableData = res.data;
        this.InfoData = res.data;
      }
    },

    //添加类型数据
    async addCon() {
      this.dialogFormVisible_2 = false;
      console.log("开始添加！！！");
      const { data: res } = await this.axios({
        url: "/advertisingType/add",
        method: "post",
        data: {
          typeName: this.form.a_type_name,
          status: this.s_state,
        },
      
      });
      if (res.code == 0) {
        this.getCon(this.currentPage, this.pagesize);
        (this.form.a_type_name = ""), (this.s_state = "");
      }
    },
    //编辑类型数据
    async editCon() {
      console.log("开始编辑！！！");
      const { data: res } = await this.axios({
        url: "/advertisingType/update",
        method: "post",
        data: {
          typeName: this.form.e_type_name,
          status: this.s_state,
          id: this.id,
        },
       
      });
      if (res.code == 0) {
        this.getCon(this.currentPage, this.pagesize);
        // this.form.a_type_name='',
        // this.s_state=''
      }
    },
    //删除数据
    async delCon(id) {
      const { data: res } = await this.axios({
        url: "/advertisingType/delete/" + id,
        method: "get",
        
      });
      if (res.code == 0) {
        console.log("删除成功！！！");
        this.getCon(this.currentPage, this.pagesize);
      }
      console.log(res.data);
    },
    //筛选函数
    async scrCon() {
      const { data: res } = await this.axios({
        url: "/advertisingType/findbywhere",
        method: "post",
        data: {
          name: this.w_type_name,
          status: this.value,
        },
        
      });
      if (res.code == 0) {
        this.tableData = res.data;
        this.InfoData = res.data;
      }
    },
    //分页获取
    //子组件传入pagesize
    getPagesize(val) {
      this.pagesize = val;
      this.getCon(this.currentPage, this.pagesize);
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      this.getCon(this.currentPage, this.pagesize);
    },
    //筛选函数
    async onScreen(index, row) {
      console.log("开始筛选！！！");
      this.getCon(this.currentPage, this.pagesize);
    },
    //添加函数
    onAdd() {
      this.dialogFormVisible_2 = false;
      console.log(index, row);
      console.log("开始添加！！！");
      this.addCon();
    },
    //编辑按钮
    handleEdit(index, row) {
      console.log(row);
      this.form.e_type_name = row.typeName;
      this.s_state = row.status;
      this.id = row.id;
      // this.editCon()
    },
    //时间戳转换函数
    time1(a) {
      return this.time(a);
    },
    //查看数据(直接获取此条的数据，不经过服务器)
    handleSee(index, row) {
      console.log(row);
      this.InfoData.typeName = row.typeName;
      this.InfoData.id = row.id;
      this.InfoData.status = row.status;
    },
    //删除的弹框
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delCon(row.id),
            this.$message({
              type: "success",
              message: "删除成功!",
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击取消时
    noCon() {
      (this.form.a_type_name = ""), (this.s_state = "");
    },
  },
};
</script>

<style>
.eidt {
  margin-left: 45%;
  margin-top: 5%;
}
</style>